<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <script>
        function sayHello(){
            // 处理代码
            alert("Hello JavaScript");
        }
    </script>
    <!--错误示范:外部引入js的script标签的标签体中不能存在内容-->
    <!--<script type="text/javascript" src="hello.js">-->
        <!--function sayHello(){-->
            <!--// 处理代码-->
            <!--alert("Hello JavaScript");-->
        <!--}-->
    <!--</script>-->
    <!--错误示范:外部引入js的script标签必须有开始标签与结束标签-->
    <!--<script type="text/javascript" src="hello.js"/>-->
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>
<!--
    JavaScript可以为HTML中任意元素绑定事件
    语法: 事件句柄="javascript:事件处理代码;"
    javascript:可以省略
-->
<input type="button" value="简短缩写方式" onclick="javascript:alert('Hello World');"><br>
<div style="width: 100px;height: 100px;background: red;" ondblclick="alert('我在双击div')"></div>
<!--
    内联方式,语法:事件句柄="函数名()"
    类似于Java中的方法调用
-->
<button onclick="sayHello()">内联方式</button><br>
<!--
    如果使用超链接进行事件绑定的时候,一般情况下不允许超链接进行跳转
    href属性也支持js语法
    我们可以通过简短缩写方式,使得超链接的href属性不指向任何URL
    即:使得超链接默认的跳转失效
-->
<a href="javascript:;" onclick="f1()">外部引入</a><br>
</body>
</html>